import React from 'react';
import {HYSteps} from "./interface"
import { Steps, Button, message,Popover } from 'antd';
import './index.less'
import {StepsProps} from "antd/lib/steps";
import HYButton from "../HYButton/HYButton";


const Step = Steps.Step;


export interface HYStepsProps extends StepsProps{
  steps:HYSteps[];
}

export interface HYStates {
  current:number;
}

class HYSteps extends React.PureComponent<HYStepsProps, HYStates> {


  constructor(props) {
    super(props);
    this.state = {
      current: this.props.current,
    };

    console.log('HYSteps constructor');

  }

  render() {

    console.log('HYSteps render');

    const {
      steps,
      direction,
      progressDot,
      ...restProps
    } = this.props;

    const {
      current,
      ...restState
    } = this.state;

    const customDot = (dot, { status, index }) => (
      <Popover content={<span>step {index} status: {status}</span>}>
        {dot}{index}{index}
      </Popover>
    );

    const restPropsWhithProgressDot = {
      // direction:direction,
      ...restProps};

    return (
      <div className={'hy-stepsContain'} >

        {
          (direction &&direction==='vertical') ?
            <div className="horizontal">
              <Steps {...restPropsWhithProgressDot} current={current} direction ={'horizontal'}>
                {this.props.steps.map(item => <Step key={item.title} title={item.title} />)}
              </Steps>
            </div>
            :
            <div className="vertical">
              <Steps {...restPropsWhithProgressDot} current={current} direction ={'vertical'}>
                {this.props.steps.map(item => <Step key={item.title} title={item.title} />)}
              </Steps>
            </div>
        }


        <div className="steps-action" style={{marginTop:'40px'}}>
          {
            current < steps.length - 1
            &&  <HYButton  onClick={() => this.next()} type="primary">下一步</HYButton>
          }
          {
            current === steps.length - 1
            && <HYButton type="primary" onClick={() => message.success('Processing complete!')}>完成</HYButton>
          }
          {
            current > 0
            && (
              <HYButton type="primary" style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                上一步
              </HYButton>
            )
          }
        </div>
      </div>
    );
  }

  private next():void {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  private prev():void {
    const current = this.state.current - 1;
    this.setState({ current });
  }



}

export default HYSteps;
